<template>
  <div>
    <h1>声明周期钩子函数</h1>
    <!-- <input type="text" v-model="msg" /> -->
    <button @click="destory">销毁</button>
    <div ref="box">于明洋</div>
    <button @click="changemsg">changemsg</button>
    <p ref="test_msg">{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      msg: "朝阳犯困了！！"
    };
  },
  //   beforeCreate 数据、函数、方法、计算属性、监听、$el没有初始化完成，不能操作DOM

  beforeCreate() {
    console.log("beforeCreate");
    // 能得到msg,意味data初始化完成
    console.log(this.msg);
    // 能得到ref的值，意味可以操作DOM
    console.log(this.$refs);
    console.log(this.destory);
    console.log(this.$el);
  },
  //   created 数据、函数、方法、计算属性、监听初始化完成，不能操作DOM,获取不到$el
  created() {
    console.log("created");
    console.log(this.msg);
    console.log(this.$refs);
    console.log(this.destory);
    console.log(this.$el);
  },
  //  beforeMount 数据、函数、方法、计算属性、监听初始化完成，不能操作DOM,获取不到$el
  beforeMount() {
    console.log("beforeMount");
    console.log(this.msg);
    console.log(this.$refs);
    console.log(this.destory);
    console.log(this.$el);
  },
  //  mounted 数据、函数、方法、计算属性、监听初始化完成，能操作DOM,获取到$el
  mounted() {
    console.log("mounted");
    console.log(this.msg);
    console.log(this.$refs);
    console.log(this.destory);
    console.log(this.$el);
  },
  beforeUpdate() {
    console.log("beforeUpdate");
    // beforeUpdate中的数据是没有改变的值
    // console.log(this.msg);
    console.log(this.$refs.test_msg);
  },
  updated() {
    console.log("updated");
    // updated是改变更新之后的值
    // console.log(this.msg);
    console.log(this.$refs.test_msg);
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    console.log(this.msg);
  },
  destroyed() {
    console.log("destroyed");
    console.log(this.msg);
  },
  methods: {
    destory() {
      this.$destroy();
    },
    changemsg() {
      this.msg = "今天天气真好！！";
    }
  }
};
/* 


*/
</script>
<style lang='' scoped>
</style>